<template>
  <!-- 课程视频播放组件页面 -->
  <div class="course-video">
    <!-- 导航栏 -->
    <van-nav-bar left-text="返回" title="课时视频" left-arrow @click-left="$router.go(-1)" />

    <!-- 设置视频容器 -->
    <div class="video-container" id="video-container"></div>
  </div>
</template>

<script>
/* eslint-disable */
// 这个不需要 elsint 校验

// 导入接口
// 1、videoPlayInfo：根据 fileId 获取阿里云对应的视频播放信息接口
import { videoPlayInfo } from '@/services/course'

// 导入 vant 组件
import { NavBar } from 'vant'

export default {
  name: 'CourseVideo',
  components: {
    VanNavBar: NavBar
  },
  props: {
    // 课时 ID
    lessonId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      videoInfo: {} // 视频数据
    }
  },
  created () {
    // 调用获取视频数据的方法
    this.loadVideo()
  },
  methods: {
    // 获取视频数据
    async loadVideo () {
      // 发送请求
      const { data } = await videoPlayInfo({
        lessonId: this.lessonId
      })
      // 如果请求成功
      if (data.state === 1) {
        this.videoInfo = data.content

        // 初始化播放器
        new window.Aliplayer({
          // 视频容器 ID
          id: 'video-container',
          vid: this.videoInfo.fileId,
          playauth: this.videoInfo.playAuth,
          qualitySort: 'asc',
          format: 'mp4',
          mediaType: 'video',
          width: '100%',
          height: '500px',
          autoplay: true,
          isLive: false,
          rePlay: false,
          playsinline: true,
          preload: true,
          controlBarVisibility: 'hover',
          useH5Prism: true
        }, function (player) { })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 全局样式
.course-video {
  height: 210px;

  // 视频播放容器
  .video-container {
    height: 100% !important;
  }
}
</style>
